<template>
	<view class="card-page">
		<!-- 银行卡展示 -->
		<view class="" v-if="cards.length>0">
			<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0">
				<view class="item-card" v-for="(item,index) in cards" :key="index" @tap="Clickbankcard(item.bankName,item.bankNumber.slice(12),item.id)">
					<!-- 银行信息 -->
					<view class="_flex_column">
						<text style="font-weight: bold; margin-bottom: 2rpx;">{{item.bankName}}</text>
						<text>**** **** **** {{item.bankNumber.slice(12)}}</text>
					</view>

					<!-- 解绑按钮 -->
					<view class="jiebitem-card-right" @tap="Bankcardunbound(item.id)">
						解绑
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部添加银行卡 -->
		<view class="card-page-bottom" @tap="jumpTo">
			<image src="../../static/images/jia.png" mode="" class="add-bank-img"></image>
			<text class="add-bank-text">添加银行卡</text>
		</view>
	</view>
</template>

<script>
	import {bankfindList,bankdelete} from '@/api/index.js'
	export default {
		data() {
			return {
				cards: [],
				id: 0
			}
		},
		onLoad(data) {
			if(data != {}) {
				this.id = data.id
				console.log(data.id)
			}
			bankfindList({}).then(res=>{
				console.log(res)
				this.cards = res
			})
		},
		methods: {
			jumpTo() {
				uni.navigateTo({
					url: "band_bank_card"
				});
			},
			Bankcardunbound(id) {
				console.log(id)
				let data = {
					id: id
				}
				bankdelete(data).then(res=>{
					if(res===null){
						this.$api.msg('银行卡解绑成功');
						setTimeout(()=>{
							uni.redirectTo({
								url: 'my_bank_card'
							})
						},1000)	
					}
					
				})
			},
			Clickbankcard(bankName,bankNumber,id) {
				if( this.id === '-1' ) {
					console.log(bankNumber)
					uni.setStorageSync('bankName', bankName)
					uni.setStorageSync('bankNumber', bankNumber)
					uni.setStorageSync('bankId', id)
					uni.redirectTo({
						url: 'cash_withdrawal'
					})
				}
			}
		}
	}
</script>

<style>
	@import "../../static/css/my_bank_card.css";
</style>
